<template>
	<view class="container">
		<view class="solid-bottom bg-white text-13 flex justify-between align-center padding">
			<view class="text-333 flex-sub text-bold">
				优惠券名称
			</view>
			<input type="text" v-model="name" value="" class="text-13 flex-treble" placeholder="请填写优惠券名称" />
		</view>
		<view class="solid-bottom bg-white text-13 flex justify-between align-center padding">
			<view class="text-333 flex-sub text-bold">
				优惠券数量
			</view>
			<input type="text" v-model="publishNum" value="" class="text-13 flex-treble" placeholder="请填写优惠券数量" />
		</view>
		<view class="solid-bottom bg-white text-13 flex justify-between align-center padding">
			<view class="text-333 flex-sub text-bold">
				优惠券类型
			</view>
			<radio-group class="flex-treble flex justify-between align-center" @change="RadioChange">
				<view class="flex justify-start align-center">
					<radio class="radio yellow" :class="radio=='A'?'bg-white':''" :checked="radio=='A'?true:false"
						value="A"></radio>
					<view class="title text-13 margin-left-xs">满减券</view>
				</view>
				<view class="flex justify-start align-center">
					<radio class="radio yellow" :class="radio=='B'?'checked':''" :checked="radio=='B'?true:false"
						value="B"></radio>
					<view class="title text-13 margin-left-xs">抵扣券</view>
				</view>
				<view class="flex justify-start align-center">
					<radio class="radio yellow" :class="radio=='C'?'checked':''" :checked="radio=='C'?true:false"
						value="C"></radio>
					<view class="title text-13 margin-left-xs">发单券</view>
				</view>
				<view class="flex justify-start align-center">
					<radio class="radio yellow" :class="radio=='D'?'checked':''" :checked="radio=='D'?true:false"
						value="D"></radio>
					<view class="title text-13 margin-left-xs">消费券</view>
				</view>
			</radio-group>
		</view>
		<view v-if="radio=='A'" class="margin-bottom-sm bg-white text-13 flex justify-between align-center padding">
			<view class="text-333 flex-sub text-bold"> 消费满 ¥： </view>
			<view class="flex-treble flex justify-between align-center">
				<input type="text" v-model="useMoneyLimit" value="" class="text-13 color text-center" />
				<view class="text-13 text-666"> 减 </view>
				<input type="text" v-model="amount" value="" class="text-13 color text-center" />
			</view>
		</view>
		<view v-else-if="radio == 'B'"
			class="solid-bottom margin-bottom-sm bg-white text-13 flex justify-between align-center padding">
			<view class="text-333 flex-sub text-bold">
				折扣比例:
			</view>
			<input type="number" v-model="discount" maxlength='3' value="" class="text-13 flex-treble"
				placeholder="请输入抵扣比例" />
		</view>
		<view v-else class="solid-bottom margin-bottom-sm bg-white text-13 flex justify-between align-center padding">
			<view class="text-333 flex-sub text-bold">
				优惠金额:
			</view>
			<input type="number" v-model="amounts" value="" class="text-13 flex-treble" placeholder="请输入优惠金额" />
		</view>

		<!-- <view v-if="radio=='A'" class="margin-bottom-sm bg-white text-13 flex justify-between align-center padding">
			<view class="text-333 flex-sub text-bold">
				消费满 ¥：
			</view>
			<view class="flex-treble flex justify-between align-center">
				<input type="text" value="" class="text-13 color text-center" />
				<view class="text-13 text-666">
					减
				</view>
				<input type="text" value="" class="text-13 color text-center" />
			</view>
		</view>
		<view v-else class="solid-bottom margin-bottom-sm bg-white text-13 flex justify-between align-center padding">
			<view class="text-333 flex-sub text-bold">
				抵扣金额 ¥：
			</view>
			<input type="text" value="" class="text-13 flex-treble" placeholder="请输入抵扣金额" />
		</view> -->
		<view v-if="radio=='D'" style="flex-direction: column;" @click="$refs.tkitree._show()"
			class="margin-bottom-sm text-13 flex   padding bg-white">
			<view style="display: flex;justify-content: space-between;">
				<view class="text-333 text-bold">
					是否限定分类<text class="text-999">(不限定请忽略)</text>
				</view>
				<view class="flex justify-start align-center">
					<view class="text-767696 margin-right-xs">
						请选择
					</view>
					<image :src="baseUrl + '/static/images/right.png'" mode="" style="width: 22rpx;height: 22rpx;">
					</image>
				</view>
			</view>

			<view class="flex flex-wrap margin-top-xs">
				<view style="padding: 18rpx 28rpx"
					class="bg-F4F4F4 round margin-left-xs text-df margin-top-sm color t-btn" v-for="item in checked">
					{{item.name}}
				</view>
			</view>
		</view>
		<view class="solid-bottom bg-white text-13 flex   padding">
			<view class="text-333  text-bold" style="flex: 1;">
				优惠券描述
			</view>
			<textarea v-model="content" style="flex:3;margin-top: 5rpx;height: 80rpx;" placeholder="优惠券描述" />
		</view>
		<view class="solid-bottom text-13 flex justify-between align-center padding bg-white">
			<view class="text-333 text-bold">
				发行开始日期
			</view>
			<view class="flex justify-start align-center" @click="openDate(1)">
				<view class="text-767696 margin-right-xs">
					{{startTime ||"请选择"}}
				</view>
				<image :src="baseUrl + '/static/images/right.png'" mode="" style="width: 22rpx;height: 22rpx;"></image>
			</view>
		</view>
		<view class="margin-bottom-sm text-13 flex justify-between align-center padding bg-white">
			<view class="text-333 text-bold">
				发行结束日期
			</view>
			<view class="flex justify-start align-center" @click="openDate(2)">
				<view class="text-767696 margin-right-xs">
					{{endTime ||"请选择"}}
				</view>
				<image :src="baseUrl + '/static/images/right.png'" mode="" style="width: 22rpx;height: 22rpx;"></image>
			</view>
		</view>
		<!-- <view class="margin-bottom-sm text-13 flex justify-between align-center padding bg-white">
			<view class="text-333 text-bold">
				结束日期
			</view>
			<view class="flex justify-start align-center" @click="openDate(3)">
				<view class="text-767696 margin-right-xs">
					{{endTime ||"请选择"}}
				</view>
				<image :src="baseUrl + '/static/images/right.png'" mode="" style="width: 22rpx;height: 22rpx;"></image>
			</view>
		</view> -->
		<view class="flex justify-between align-center margin-sm text-15">
			<button @click="addCoupon(1)" class="btn solid padding bg-tr">保存</button>
			<button @click="addCoupon(2)" class="btn padding bg-color text-white">发布</button>
		</view>
		<w-picker :visible.sync="visible" mode="date" startYear="2021" endYear="2129" :current="true" fields="hour"
			@confirm="onConfirm($event)" :disabled-after="false" ref="date"></w-picker>
		<tki-tree @confirm='handChecked' ref="tkitree" :multiple='true' idKey='id' :range="producType" rangeKey="name"
			confirmColor="#4e8af7" />
	</view>
</template>

<script>
	import tkiTree from "@/components/tki-tree/tki-tree.vue"
	export default {
		data() {
			return {
				baseUrl: this.$config.baseUrl,
				visible: false,
				radio: '',
				star_time: '请选择',
				end_time: '请选择',
				time_type: '',
				producType: [],
				shopId: '',
				name: '', //优惠券名字
				publishNum: '', //发行数量
				scopeType: 1, //使用范围
				amount: '', //优惠金额
				useMoneyLimit: '', //使用金额限制
				scopeRelationIdList: [], //商品类型
				content: '', //描述
				publishStartTime: '', //发行时间
				publishEndTime: '', //结束时间
				endTime: '', //到期时间
				checked: [], //已选择商品分类
				type: '',
				checkList: [],
				status: '',
				id: '',
				shopType: '',
				startTime: '',
				discount: '',
				amounts: ''
			};
		},
		onLoad(option) {
			const data = JSON.parse(option.item)
			console.log(data)
			this.name = data.name
			this.publishNum = data.publishNum
			this.type = data.type
			if (this.type == 4) {
				this.radio = 'A'
				this.useMoneyLimit = data.useMoneyLimit / 100
				this.amount = data.amount / 100
			} else if (this.type == 1) {
				this.radio = 'B'
					this.discount = data.amount
			} else if (this.type == 3) {
				this.radio = 'C'
				this.amounts = data.amount / 100
			} else {
				this.radio = 'D'
				this.amounts = data.amount / 100
			}
			this.shopType = data.shopType
			this.shopId = data.shopId
			this.content = data.content
			this.id = data.id
			this.publishEndTime = data.publishEndTime
			this.publishStartTime = data.publishStartTime
			this.endTime = data.endTime
			this.status = data.status
			this.startTime = data.startTime
			if (data.bak1) {
				if (Array.isArray(JSON.parse(data.bak1))) {
					this.checked = JSON.parse(data.bak1)
				}

			}

			console.log(this.checkList)
			if (this.checked.length != 0) {
				for (let i in this.checked) {
					this.scopeRelationIdList.push(this.checked[i].id)
				}
			}

			console.log(this.scopeRelationIdList)
		},
		onShow() {
			this.getProducType()

		},
		methods: {
			RadioChange(e) {
				this.radio = e.detail.value
			},
			openDate(e) {
				this.visible = true
				this.time_type = e
			},
			onConfirm(e) {
				console.log(e)
				if (this.time_type == 1) {
					this.startTime = e.value
				} else {
					this.endTime = e.value
				}
			},
			async getProducType() {
				const [err, rs] = await this.$get(this.$api.home_categoryTreeList, {
					type: 1
				})
				if (rs) {
					this.producType = rs.data
				}
			},
			handChecked(data) {
				console.log(data)
				this.checked = data
			},
			async addCoupon(status) {
				console.log(this.radio)

				const {
					radio,
					checked,
					scopeRelationIdList,
					name,
					publishNum,
					scopeType,
					amount,
					useMoneyLimit,
					content,
					publishStartTime,
					publishEndTime,
					endTime,
					type,
					shopId,
					id,
					startTime,
					discount,
					amounts
				} = this

				if (!name) {
					return this.$util.msg('优惠券名字不能为空')
				}
				if (!publishNum) {
					return this.$util.msg('发行数量不能为空')
				}
				if (radio == 'A') {
					this.type = 4
				} else if (radio == 'B') {
					this.type = 1
				} else if (radio == 'C') {
					this.type = 3
				}
				if (radio == 'D' && checked.length != 0) {
					const array = []
					for (let i in checked) {
						array.push(checked[i].id)
					}
					console.log(array)
					this.scopeRelationIdList = array
					this.type = 2
				} else {
					this.scopeRelationIdList = []
					this.type = 2;
				}
				if (!this.type) {
					return this.$util.msg('优惠券类型不能为空')
				}
				console.log(this.radio)
			
				
				
				if (this.radio == "A") {
					console.log(this.amount +'****')
					if (!useMoneyLimit) {
						return this.$util.msg("优惠使用金额限制不能为空");
					}
					if (!amount) {
						return this.$util.msg("优惠金额不能为空");
					}
				}
				
				if (this.radio == "B") {
					console.log(this.discount + '////')
					if (!this.discount) {
						return this.$util.msg("优惠金额不能为空");
					}
				}
				if (this.radio == 'C' || this.radio == 'D') {
					console.log(this.amounts +'----')
					if (!this.amounts) {
						return this.$util.msg("优惠金额不能为空");
					}
				}

			   if (!name) {
					return this.$util.msg('优惠券名字不能为空')
				}
				if (!content) {
					return this.$util.msg('优惠券描述不能为空')
				}
				if (!startTime) {
					return this.$util.msg('优惠券开始时间不能为空')
				}
				if (!endTime) {
					return this.$util.msg('优惠券结束时间不能为空')
				}
				var date = new Date(startTime)
				var time1 = date.getTime()
				var date2 = new Date(endTime)
				var time2 = date2.getTime()

				if (time1 >= time2) {
					return this.$util.msg('开始时间不能大于结束时间或者相等')
				}


				const data = {
					name,
					publishNum,
					content,
					endTime,
					scopeType: 1,
					shopId,
					status,
					id,
					startTime,
					bak1: JSON.stringify(checked)
				}
				if (this.type == 2 && this.scopeRelationIdList.length != 0) {
					data['scopeRelationIdList'] = this.scopeRelationIdList
					data['scopeType'] = 2
				}
				if (this.radio == 'A') {
					data['amount'] = this.amount * 100
					data['useMoneyLimit'] = useMoneyLimit * 100
					data['type'] = 4
				}
				if (this.radio == 'B') {
					data['amount'] = this.discount
					data['type'] = 1
				}
				if (this.radio == 'C') {
					data['amount'] = this.amounts * 100
					data['type'] = 3
				}
				if (this.radio == 'D') {
					data['amount'] = this.amounts * 100
					data['type'] = 2
				}

				const [err, rs] = await this.$jsonPost(this.$api.updateCoupon, data)
				if (rs) {
					console.log(rs)
					this.$util.msg(rs.message)
					setTimeout(() => {
						uni.navigateBack()
					}, 1000)
				}




			}
		}
	}
</script>

<style lang="scss" scoped>
	.btn {
		margin-top: 128rpx;
		width: 346rpx;
		height: 88rpx;
	}
</style>
